import {View} from '@tarojs/components';

import styles from './index.module.scss'
import Icon from '../../../components/Icon';
import classNames from 'classnames';

type IconType = {
  name:string;
  size: number;
}

interface ButtonProps {
  type?: string;
  icon?: {iconData:IconType};
  className?:string;
  clickHandler: () => void;
  children: React.ReactNode
}

function Button (props:ButtonProps) {
  const {type = 'default', icon, children, className, clickHandler, ...others} = props

  const iconNode = icon ? <Icon name={icon.name} size={icon.size}/> : null
  const cls = classNames(`${styles.button}`,
    styles[`button_${type}`], className)
  return (
    <View className={styles.button_container}>
      <View className={cls} onClick={clickHandler} {...others} >
        {iconNode}
        {children}
      </View>
    </View>
  )
}

export default Button